<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxScroll 间歇式无缝滚动 &raquo; 在线演示 - 前端开发仓库</title>
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<h1>jQuery cxScroll 间歇式无缝滚动</h1>

<div class="wrap">
  <h2>API 接口</h2>
  <div id="pic_list_1" class="scroll_horizontal">
    <div class="box">
      <ul class="list">
        <li><img src="img/temp_pic_1.jpg"></li>
        <li><img src="img/temp_pic_2.jpg"></li>
        <li><img src="img/temp_pic_3.jpg"></li>
        <li><img src="img/temp_pic_4.jpg"></li>
        <li><img src="img/temp_pic_5.jpg"></li>
      </ul>
    </div>
  </div>
  <div id="acts">
    <div class="cxbtn_group clearfix">
      <a class="cxbtn" href="javascript://" rel="play">开始自动播放</a>
      <a class="cxbtn" href="javascript://" rel="stop">停止自动播放</a>
      <a class="cxbtn" href="javascript://" rel="prev">向前滚动</a>
      <a class="cxbtn" href="javascript://" rel="next">向后滚动</a>
      <a class="cxbtn" href="javascript://" rel="prev" rev="200">向前滚动（快速）</a>
      <a class="cxbtn" href="javascript://" rel="next" rev="200">向后滚动（快速）</a>
    </div>
  </div>

	<h2>文档</h2>
	<ul>
		<li><a target="_blank" href="https://github.com/ciaoca/cxScroll">Github</a></li>
		<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxscroll/">中文文档</a></li>
	</ul>
	
	<h2>作者</h2>
	<p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p>
	<p>Released under the MIT license</p>
</div>

<script src="http://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.cxscroll.min.js"></script>
<script>
(function(){
  var acts = $('#acts');
  var cxScrollApi;

  $('#pic_list_1').cxScroll({
    auto: false,
  }, function(api){
    cxScrollApi = api;
  });

  acts.on('click', 'a', function(){
    var _rel = this.rel;
    var _rev = this.rev;

    switch (_rel) {
      case 'play':
        cxScrollApi.play();
        break;

      case 'stop':
        cxScrollApi.stop();
        break;

      case 'prev':
        if (_rev) {
          cxScrollApi.prev(_rev);
        } else {
          cxScrollApi.prev();
        };
        break;

      case 'next':
        if (_rev) {
          cxScrollApi.next(_rev);
        } else {
          cxScrollApi.next();
        };
        break;
    };

  });
})();
</script>
</body>
</html>